<template>
	<view class="page-category">
		<div class="categories">

			<div class="category-group">
				<text :class="{ 'category': true, 'active': classifysItemId === item.id }" v-for="item in classifysList"
					:key="item.id" @click="categoryClick(item)">
					{{ item.title }}
				</text>
			</div>

			<div class="category-group">
				<text :class="{ 'category': true, 'active': regionsItemId === item.id }" v-for="item in regionsList"
					:key="item.id" @click="regionClick(item)">
					{{ item.name }}
				</text>
			</div>

			<div class="category-group">
				<text :class="{ 'category': true, 'active': scheduleType === -1 }" @click="scheduleClick(-1)">进度</text>
				<text :class="{ 'category': true, 'active': scheduleType === 1 }" @click="scheduleClick(1)">完结</text>
				<text :class="{ 'category': true, 'active': scheduleType === 0 }" @click="scheduleClick(0)">连载</text>
			</div>



		</div>

		<div class="comics">

			<div class="comic-item" v-if="dataList?.length" v-for="item in dataList" :key="item.id" @click="itemClick(item)">
				<image class="chapter-image" :src="item.coverpic" />
				<p class="title text-ellipsis">{{ item.title }}</p>
			</div>
			<div v-else style="width:100%;text-align: center;font-size: 30rpx;"> 暂无数据 </div>

		</div>
	</view>

</template>

<script lang="ts" setup>
import { getAnimeList, getClassify, getHistoryChaps } from '@/api';
import { ref, getCurrentInstance } from 'vue'

const { imgBaseUrl } = getCurrentInstance()?.proxy as any;
const classifysList = ref<{ id: number, title: string }[]>()
const regionsList = ref<{ id: number, name: string }[]>([{ id: -1, name: "地区" }, { id: 1, name: "中国" }, { id: 2, name: "日本" }, { id: 3, name: "韩国" }])
const classifysItemId = ref(-1)
const regionsItemId = ref(-1)
const scheduleType = ref(-1)
const dataList = ref<API.BookItem[]>()

type classifyTypeItem = {
	id: number;
	name: string
}
type classifyItem = {
	id: number;
	title: string
}

// 分类
const categoryClick = (item: classifyItem) => {
	classifysItemId.value = item.id
	getList()
}
// 地区
const regionClick = (item: classifyTypeItem) => {
	regionsItemId.value = item.id
	getList()
}
// 是否完结
const scheduleClick = (type: number) => {
	scheduleType.value = type
	getList()
}



const getClassifysList = async () => {
	const { data } = await getClassify()
	classifysList.value = [{ id: -1, title: "全部" }, ...data]
}

const getList = async () => {
	const { data } = await getAnimeList({
		page: 1,
		page_size: 1000,
		classifyid: classifysItemId.value, //	分类ID
		region: regionsItemId.value, 	//	1中国 2日本 3韩国
		isfinish: scheduleType.value, //	1完结 2连载
	})
	dataList.value = data.data
}

const itemClick = async (item: API.BookItem) => {
	// uni.navigateTo({ url: `/pages/book-detail/index?&id=${item.id}` })
	const { data } = await getHistoryChaps(item.id)
	uni.navigateTo({ url: `/pages/readingPage/index?&id=${item?.id}&chapter=${data.history_chapter}` });
}

getClassifysList()
getList()
uni.setNavigationBarTitle({ title: '分类' });

</script>

<style lang="scss" scoped>
.page-category {
	background-color: #fff;

}

.categories {
	display: flex;
	flex-wrap: wrap;
	padding: 50rpx 50rpx 0 50rpx;
}

.category-group {
	display: flex;
	flex-basis: 100%;
	flex-flow: row wrap;
	justify-content: flex-start;
	align-items: center;
}

.category {
	display: inline-block;
	margin-bottom: 45rpx;
	min-width: 55rpx;
	font-size: 28rpx;
	color: #8B8B8B;
	margin-right: 52rpx;
	position: relative;
}

.category.active {
	font-weight: bold;
	color: #0DA0FF;

	&::after {
		content: ' ';
		width: 32rpx;
		height: 16rpx;
		position: absolute;
		bottom: -18rpx;
		left: calc(50% - 18rpx);
		background: url(#{$imgBaseUrl}classify-icon-item-bottom.webp) no-repeat;
		background-size: 100% 100%;
	}
}

.comics {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: flex-start;
	text-align: center;
	min-height: calc(100vh - 642rpx);
}

.comic-item {
	width: 218rpx;
	border-radius: 6rpx;
	margin-left: 24rpx;
	margin-top: 37rpx;
}

.comic-item image {
	width: 100%;
	height: 292rpx;
	border-radius: 6rpx;
}

.comic-item .title {
	width: 100%;
	font-size: 28rpx;
	color: #000000;
}
</style>
